<template>
  <div class="head">
    <div class="mid">
      <div class="box-l" v-show="bols">
        <!-- 中间用户头像区域 -->
        <router-link class="box-one" tag="div" to="/user">
          <img src="@/assets/img/home/Home-img/head.png" alt="" class="img1" />
        </router-link>
        <!-- 中间用户名区域 -->
        <div>
          <p>未登录</p>
          <div class="tabTwo">
            <div class="tab-Left">
              <img src="@/assets/img/home/Home-img/Button-钻石.png" alt="" />
              <span>xxx</span>
              <img src="@/assets/img/home/Home-img/Icon-添加.png" alt="" />
            </div>
            <div class="tab-Two">
              <img src="@/assets/img/home/Home-img/Button-礼物.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- ------ -->
      <div
        class="box-l"
        v-show="bols == false"
        v-for="item in list"
        :key="item.id"
      >
        <!-- 中间用户头像区域 -->
        <router-link class="box-one" tag="div" to="/user">
          <img :src="item.headurl" alt="" />
        </router-link>
        <!-- 中间用户名区域 -->
        <div>
          <p>{{ item.nickName }}</p>
          <div class="tabTwo">
            <div class="tab-Left">
              <img src="@/assets/img/home/Home-img/Button-钻石.png" alt="" />
              <span>35</span>
              <img src="@/assets/img/home/Home-img/Icon-添加.png" alt="" />
            </div>
            <div class="tab-Two">
              <img src="@/assets/img/home/Home-img/Button-礼物.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="box-r">
        <img src="@/assets/img/home/Home-img/首页-图标.png" alt="" />
        <img src="@/assets/img/home/Home-img/搜索-图标.png" alt="" />
      </div>
    </div>
    <div class="end">
      <router-link tag="div" to="/home/phb/ml">
        <img src="@/assets/img/home/Home-img/皇冠.png" alt="" />
        <img
          src="@/assets/img/home/Home-img/排行榜.png"
          alt=""
          class="end-one"
        />
        <span>排行榜</span>
      </router-link>
      <router-link tag="div" to="rwzx">
        <img src="@/assets/img/home/Home-img/Icon-任务.png" alt="" />
        <span>任务</span>
      </router-link>
      <router-link tag="div" to="hd">
        <img src="@/assets/img/home/Home-img/Icon-活动.png" alt="" />
        <span>活动</span>
      </router-link>
      <router-link tag="div" to="jt">
        <img src="@/assets/img/home/Home-img/Icon-教堂.png" alt="" />
        <span>教堂</span>
      </router-link>
    </div>
    <div class="two">
      <!-- 盒子里面的头部部分 -->
      <div class="top">一起玩</div>
      <!-- 盒子里面中间部分 -->
      <div class="two-center">
        <div class="two-center-left">剧本杀</div>
        <div class="two-center-right">
          <router-link class="two-center-right-top" tag="div" to="lrs"
            >狼人杀</router-link
          >
          <router-link class="two-center-right-down" tag="div" to="hgt"
            >海龟汤</router-link
          >
        </div>
      </div>
      <!-- 盒子里面底部部分 -->
      <div class="two-down">
        <router-link class="two-down-one" tag="div" to="xrzl"
          >血染钟楼</router-link
        >
        <div class="two-down-two" is-link @click="showPopup">你画我猜</div>

        <router-link class="two-down-three" tag="div" to="cwqc"
          >c位抢唱</router-link
        >
        <div class="two-down-four" is-link @click="moregame">更多游戏</div>
      </div>
      <!-- 更多游戏的底部弹出的内容 -->
      <van-popup
        v-model="game"
        round
        position="bottom"
        :style="{ height: '80%' }"
        class="moregamecontent"
      >
        <h1>社交游戏</h1>
        <div class="moregamecontent-top">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <!-- 趣味游戏 -->
        <h1>趣味游戏</h1>
        <div class="moregamecontent-toptwo">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </van-popup>
    </div>
    <div class="home">
      <div class="online">在线匹配</div>
      <div class="flight">
        <p class="p1"><i>飞行小纸条</i> <a></a> <span>条新回复></span></p>
        <p class="p2"><span>30889</span> <a>个小纸条飞行中</a></p>
        <p class="p3">
          <img src="../../../assets/img/home/Lcyimg/flight.png" alt="" />
          <a>爱从来都是小心翼翼，喜欢…</a>
        </p>
      </div>
      <div class="home2">
        <div class="meet">
          <p>遇见萌新</p>
        </div>
        <router-link class="fate" tag="div" to="yfpp">
          <p>缘分匹配</p>
        </router-link>
      </div>
    </div>
    <div class="heads">
      <p>热门派对</p>
      <ul>
        <li>
          <div class="left">
            <img src="@/assets/img/home/Home-end/bighead(1).png" alt="" />
            <div>
              <div class="friend">
                <img src="@/assets/img/home/Home-end/Icon-交友.png" alt="" />
                <span>交友</span>
              </div>
              <p>联盟/纳新人福利</p>
              <div class="left-end">
                <img src="@/assets/img/home/Home-end/1.png" alt="" />
                <img src="@/assets/img/home/Home-end/2.png" alt="" />
                <img src="@/assets/img/home/Home-end/3.png" alt="" />
                <img src="@/assets/img/home/Home-end/4.png" alt="" />
                <img src="@/assets/img/home/Home-end/5.png" alt="" />
                <img src="@/assets/img/home/Home-end/6.png" alt="" />
                <img src="@/assets/img/home/Home-end/7.png" alt="" />
                <img src="@/assets/img/home/Home-end/8.png" alt="" />
              </div>
            </div>
          </div>
          <div class="right">
            <img src="@/assets/img/home/Home-end/Icon-人.png" alt="" />
            <span>32</span>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="@/assets/img/home/Home-end/bighead(2).png" alt="" />
            <div>
              <div class="friend">
                <img src="@/assets/img/home/Home-end/Icon-交友.png" alt="" />
                <span>交友</span>
              </div>
              <p>CPDD</p>
              <div class="left-end">
                <img src="@/assets/img/home/Home-end/1.png" alt="" />
                <img src="@/assets/img/home/Home-end/2.png" alt="" />
                <img src="@/assets/img/home/Home-end/3.png" alt="" />
                <img src="@/assets/img/home/Home-end/4.png" alt="" />
                <img src="@/assets/img/home/Home-end/5.png" alt="" />
                <img src="@/assets/img/home/Home-end/6.png" alt="" />
                <img src="@/assets/img/home/Home-end/7.png" alt="" />
                <img src="@/assets/img/home/Home-end/8.png" alt="" />
              </div>
            </div>
          </div>
          <div class="right">
            <img src="@/assets/img/home/Home-end/Icon-人.png" alt="" />
            <span>32</span>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="@/assets/img/home/Home-end/bighead(3).png" alt="" />
            <div>
              <div class="friend">
                <img src="@/assets/img/home/Home-end/Icon-交友.png" alt="" />
                <span>交友</span>
              </div>
              <p>CPDD</p>
              <div class="left-end">
                <img src="@/assets/img/home/Home-end/1.png" alt="" />
                <img src="@/assets/img/home/Home-end/2.png" alt="" />
                <img src="@/assets/img/home/Home-end/3.png" alt="" />
                <img src="@/assets/img/home/Home-end/4.png" alt="" />
                <img src="@/assets/img/home/Home-end/5.png" alt="" />
                <img src="@/assets/img/home/Home-end/6.png" alt="" />
                <img src="@/assets/img/home/Home-end/7.png" alt="" />
                <img src="@/assets/img/home/Home-end/8.png" alt="" />
              </div>
            </div>
          </div>
          <div class="right">
            <img src="@/assets/img/home/Home-end/Icon-人.png" alt="" />
            <span>32</span>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="@/assets/img/home/Home-end/bighead(4).png" alt="" />
            <div>
              <div class="friend">
                <img src="@/assets/img/home/Home-end/Icon-交友.png" alt="" />
                <span>交友</span>
              </div>
              <p>唠嗑唠嗑</p>
              <div class="left-end">
                <img src="@/assets/img/home/Home-end/1.png" alt="" />
                <img src="@/assets/img/home/Home-end/2.png" alt="" />
                <img src="@/assets/img/home/Home-end/3.png" alt="" />
                <img src="@/assets/img/home/Home-end/4.png" alt="" />
                <img src="@/assets/img/home/Home-end/5.png" alt="" />
                <img src="@/assets/img/home/Home-end/6.png" alt="" />
                <img src="@/assets/img/home/Home-end/7.png" alt="" />
                <img src="@/assets/img/home/Home-end/8.png" alt="" />
              </div>
            </div>
          </div>
          <div class="right">
            <img src="@/assets/img/home/Home-end/Icon-人.png" alt="" />
            <span>32</span>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="@/assets/img/home/Home-end/bighead(5).png" alt="" />
            <div>
              <div class="friend">
                <img src="@/assets/img/home/Home-end/Icon-交友.png" alt="" />
                <span>交友</span>
              </div>
              <p>联盟/纳新人福利</p>
              <div class="left-end">
                <img src="@/assets/img/home/Home-end/1.png" alt="" />
                <img src="@/assets/img/home/Home-end/2.png" alt="" />
                <img src="@/assets/img/home/Home-end/3.png" alt="" />
                <img src="@/assets/img/home/Home-end/4.png" alt="" />
                <img src="@/assets/img/home/Home-end/5.png" alt="" />
                <img src="@/assets/img/home/Home-end/6.png" alt="" />
                <img src="@/assets/img/home/Home-end/7.png" alt="" />
                <img src="@/assets/img/home/Home-end/8.png" alt="" />
              </div>
            </div>
          </div>
          <div class="right">
            <img src="@/assets/img/home/Home-end/Icon-人.png" alt="" />
            <span>32</span>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="@/assets/img/home/Home-end/bighead(6).png" alt="" />
            <div>
              <div class="friend">
                <img src="@/assets/img/home/Home-end/Icon-交友.png" alt="" />
                <span>交友</span>
              </div>
              <p>联盟/纳新人福利</p>
              <div class="left-end">
                <img src="@/assets/img/home/Home-end/1.png" alt="" />
                <img src="@/assets/img/home/Home-end/2.png" alt="" />
                <img src="@/assets/img/home/Home-end/3.png" alt="" />
                <img src="@/assets/img/home/Home-end/4.png" alt="" />
                <img src="@/assets/img/home/Home-end/5.png" alt="" />
                <img src="@/assets/img/home/Home-end/6.png" alt="" />
                <img src="@/assets/img/home/Home-end/7.png" alt="" />
                <img src="@/assets/img/home/Home-end/8.png" alt="" />
              </div>
            </div>
          </div>
          <div class="right">
            <img src="@/assets/img/home/Home-end/Icon-人.png" alt="" />
            <span>32</span>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="@/assets/img/home/Home-end/bighead.png" alt="" />
            <div class="ml">
              <div class="friend">
                <img src="@/assets/img/home/Home-end/Icon-交友.png" alt="" />
                <span>交友</span>
              </div>
              <p>联盟/纳新人福利</p>
              <div class="left-end">
                <img src="@/assets/img/home/Home-end/1.png" alt="" />
                <img src="@/assets/img/home/Home-end/2.png" alt="" />
                <img src="@/assets/img/home/Home-end/3.png" alt="" />
                <img src="@/assets/img/home/Home-end/4.png" alt="" />
                <img src="@/assets/img/home/Home-end/5.png" alt="" />
                <img src="@/assets/img/home/Home-end/6.png" alt="" />
                <img src="@/assets/img/home/Home-end/7.png" alt="" />
                <img src="@/assets/img/home/Home-end/8.png" alt="" />
              </div>
            </div>
          </div>
          <div class="right">
            <img src="@/assets/img/home/Home-end/Icon-人.png" alt="" />
            <span>32</span>
          </div>
        </li>
      </ul>
    </div>
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '34%' }"
      class="eject"
      round
    >
      <h1>请选择模式</h1>
      <div class="eject-p">
        <div>
          <p>你画我猜</p>
          <span>灵魂画手进阶路</span>
        </div>
      </div>
      <div class="eject-p">
        <div>
          <p>画猜接龙</p>
          <span>你画你的 我猜我的</span>
        </div>
      </div>
    </van-popup>
    <div class="shiMing" v-show="bol">
      <img src="../../../assets/img/home/Home-end/safe.png" alt="" />
      <p>
        为了呵护未成年人健康成长，谁是凶手平台推出了青少年模式，该模式下部分功能无法正常使用。请监护人主动选择，并设置监护密码。同时为相应国家号召，更好的体验平台功能，请尽快完成实名认证。
      </p>
      <p>了解青少年模式 ></p>
      <p>
        前往实名认证
        <van-icon name="cross" class="x" size="60" @click="btn" />
      </p>
    </div>
  </div>
</template>
<script>
import { getUser } from "../../../services/index";
export default {
  data() {
    return {
      show: false,
      game: false,
      bol: false,
      bols: true,
      num: JSON.parse(localStorage.getItem("uids")),
      list: [],
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    moregame() {
      this.game = true;
    },
    btn() {
      this.bol = false;
      localStorage.setItem("bol", "666");
    },
  },
  created() {
    if (this.num) {
      getUser({ uid: this.num }).then((e) => {
        this.list.push(e.data.data);
        this.bols = false;
      });
      if (localStorage.getItem("bol") == "666") {
        this.bol = false;
      } else {
        this.bol = true;
      }
    }
  },
};
</script>
<style lang='scss' scoped >
.head {
  background-image: url("@/assets/img/home/Home-end/Background-3.png");
  min-width: 100%;
  img {
    height: 32px;
    width: 652px;
    max-width: 200%;
  }
  .mid {
    display: flex;
    justify-content: space-between;
  }
  .box-l {
    width: 640px;
    height: 142px;
    display: flex;
  }
  .box-one {
    width: 90px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin-left: 30px;
    }
    .img1 {
      width: 140px;
      height: 140px;
      border-radius: 50%;
    }
  }
  .box-l p {
    font-size: 30px;
    margin: 36px 0 6px 28px;
    color: #fefefe;
  }
  .tab-Left {
    width: 112px;
    height: 36px;
    display: flex;
    align-items: center;
    text-align: center;
    border-radius: 40px;
    background-color: #212025;
    justify-content: space-around;
    margin-left: 20px;
  }
  .tabTwo span {
    font-size: 20px;
    color: white;
  }
  .tab-Left :nth-child(1) {
    width: 30px;
    height: 22px;
    margin: 0;
  }
  .tab-Left :nth-child(3) {
    width: 18px;
    height: 18px;
    margin: 0;
  }
  .tabTwo {
    display: flex;
    justify-content: space-between;
    width: 200px;
  }
  .tab-Two img {
    width: 56px;
    height: 36px;
    margin: 0;
  }
  .box-r img {
    width: 36px;
    height: 38px;
    margin: 0;
  }
  .box-r {
    width: 160px;
    display: flex;
    margin-right: 20px;
    justify-content: space-around;
    align-items: center;
  }
  .end span {
    display: block;
    margin-top: 10px;
    font-size: 24px;
    color: #858585;
  }
  .end {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .end div {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .end img {
    width: 96px;
    height: 96px;
    margin: 0;
  }
  .end .end-one {
    width: 140px;
    height: 76px;
    top: 18px;
    left: -19px;
    position: absolute;
  }
  .two {
    width: 100%;
    background: #0f0e13;
    text-align: center;
    .top {
      text-align: left;
      color: white;
      font-size: 30px;
      margin-top: 60px;
      margin-left: 15px;
    }
    .two-center {
      margin-top: 0.4px;
      display: flex;
      justify-content: space-around;
    }
    .two-center-left {
      width: 340px;
      height: 308px;
      color: white;
      text-align: left;
      background-image: url(@/assets/img/home/images/jbs.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      font-size: 40px;
      padding: 21px 23px;
    }
    .two-center-right {
      width: 340px;
      height: 308px;
      color: white;
      text-align: left;
    }
    .two-center-right-top {
      height: 160px;
      background-image: url(@/assets/img/home/images/lrs.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      font-size: 32px;
      padding: 21px 23px;
    }
    .two-center-right-down {
      height: 140px;
      background-image: url(@/assets/img/home/images/hgt.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      font-size: 32px;
      padding: 21px 23px;
    }
    .two-down {
      margin-top: 40px;
      height: 180px;
      display: flex;
      justify-content: space-around;
    }
    .two-down-one {
      width: 160px;
      height: 160px;
      color: white;
      background-image: url(@/assets/img/home/images/xrzl.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      font-size: 28px;
      padding: 20px 20px;
    }
    .two-down-two {
      width: 160px;
      height: 160px;
      color: white;
      background-image: url(@/assets/img/home/images/nhwc.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      font-size: 28px;
      padding: 20px 20px;
    }

    .two-down-three {
      width: 160px;
      height: 160px;
      color: white;
      background-image: url(@/assets/img/home/images/cwcc.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      font-size: 28px;
      padding: 20px 20px;
    }
    .two-down-four {
      width: 160px;
      height: 160px;
      color: white;
      background-image: url(@/assets/img/home/images/moregame.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      font-size: 28px;
      padding: 20px 20px;
    }
  }
  .heads {
    min-width: 95%;
    width: 95%;
    margin: 0 auto;
    ul {
      li {
        padding: 20px;
        background-color: #2d2d2d;
        display: flex;
        justify-content: space-between;
        border-radius: 20px;
        margin-bottom: 20px;
      }
      img {
        width: 112px;
        height: 112px;
      }
      .left {
        display: flex;
        justify-content: space-between;
        width: 60%;
      }
      .friend img {
        width: 26px;
        height: 22px;
      }
      .friend span {
        font-size: 24px;
        color: #9260ff;
      }
      .left-end {
        display: flex;
      }
      .left-end img {
        width: 38px;
        height: 38px;
        margin-right: -10px;
      }
      .right {
        width: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        color: #666666;
        border-left: #363636 4px solid;
      }
      .right img {
        width: 32px;
        height: 34px;
        margin-bottom: 10px;
      }
    }
    p {
      font-size: 30px;
      color: white;
      margin: 10px 0;
    }
  }
  .home {
    width: 100%;
    background-image: url("../../../assets/img/home/Lcyimg/Background.png");
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .home2 {
      width: 700px;
      height: 130px;
      display: flex;
      justify-content: space-between;

      margin: 20px auto;
      .meet {
        width: 340px;
        height: 130px;
        border-radius: 24px;
        background-image: url("../../../assets/img/home/Lcyimg/meet.png");
        background-repeat: no-repeat;
        background-size: cover;
        p {
          width: 219px;
          height: 29px;
          font-size: 30px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          margin-left: 22px;
          margin-top: 22px;
        }
      }
      .fate {
        width: 340px;
        height: 162px;
        border-radius: 24px;
        background-image: url("../../../assets/img/home/Lcyimg/luck.png");
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        p {
          width: 219px;
          height: 28px;
          font-size: 30px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          margin-left: 22px;
          margin-top: 22px;
        }
      }
    }
    .online {
      width: 690px;
      height: 42px;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      margin: 25px auto;
    }
    .flight {
      width: 700px;
      height: 180px;
      background: linear-gradient(90deg, #38659e 0%, #4bb7e6 100%);
      border-radius: 24px;
      margin: 0 auto;
      padding-left: 23px;
      p {
        font-size: 30px;
        margin: 16px 0;
      }
      .p1 {
        position: relative;
        i {
          font-size: 30px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
        span {
          width: 147px;
          height: 24px;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          opacity: 0.5;
          margin-left: 350px;
        }
        a {
          display: block;
          width: 10px;
          height: 10px;
          background: #ffec7b;
          border-radius: 50%;
          position: absolute;
          right: 180px;
          top: 20px;
        }
      }
      .p2 {
        span {
          width: 71px;
          height: 18px;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #d5b658;
        }
        a {
          width: 165px;
          height: 24px;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          opacity: 0.5;
        }
      }
      .p3 {
        img {
          height: 34px;
          width: 34px;
          vertical-align: middle;
        }
        a {
          width: 309px;
          height: 25px;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          opacity: 0.5;
        }
      }
    }
  }
  .eject {
    h1 {
      font-weight: normal;
      width: 180px;
      height: 52px;
      line-height: 52px;
      text-align: center;
      font-size: 36px;
      margin: 40px auto 34px;
    }
    .eject-p {
      width: 670px;
      height: 176px;
      border-radius: 24px;
      margin: 0 auto 24px;
      padding-left: 34px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      background-color: #efefef;
      p {
        width: 160px;
        height: 58px;
        line-height: 58px;
        font-size: 40px;
        text-align: center;
        color: #9a9a9a;
      }
      span {
        width: 168px;
        height: 34px;
        font-size: 24px;
        text-align: center;
        line-height: 34px;
        color: #9a9a9a;
      }
    }
  }
  .moregamecontent h1 {
    font-size: 36px;
    text-align: left;
    text-indent: 2em;
    margin-top: 20px;
    color: #333333;
  }
  .moregamecontent-top {
    width: 670px;
    height: 510px;
    margin: 10px auto;
  }

  .moregamecontent-top ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .moregamecontent-top li {
    width: 326px;
    height: 108px;
    background-color: gray;
    line-height: 108px;
    border-radius: 16px;
    font-size: 28px;
    margin-top: 20px;
    color: white;
  }
  .moregamecontent-toptwo {
    width: 670px;
    height: 510px;
    margin: 10px auto;
  }
  .moregamecontent-toptwo ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .moregamecontent-toptwo li {
    width: 326px;
    height: 108px;
    background-color: gray;
    line-height: 108px;
    border-radius: 16px;
    font-size: 28px;
    margin-top: 20px;
    color: white;
  }
  .shiMing {
    width: 590px;
    height: 764px;
    position: absolute;
    background-color: #2d2d2d;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    img {
      width: 276px;
      height: 162px;
      margin: 84px 158px 64px;
    }
    p:nth-child(2) {
      width: 468px;
      height: 172px;
      margin: 0 60px 52px;
      font-size: 26px;
      color: #999999;
    }
    p:nth-child(3) {
      width: 222px;
      height: 28px;
      font-size: 28px;
      color: #63d197;
      text-align: center;
      margin: 0 auto;
    }
    p:nth-child(4) {
      width: 500px;
      height: 86px;
      margin: 42px auto 0;
      border-radius: 44px;
      font-size: 28px;
      line-height: 86px;
      text-align: center;
      background-color: #63d197;
      color: #ffffff;
      position: relative;
    }
    .x {
      border: 3px solid white;
      border-radius: 50%;
      position: absolute;
      bottom: -180px;
      left: 220px;
    }
  }

  // 更多游戏的图片
  .moregamecontent-top li:nth-child(1) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/sswd.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .moregamecontent-top li:nth-child(2) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/kl.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .moregamecontent-top li:nth-child(3) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/nswc.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .moregamecontent-top li:nth-child(4) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/KTV.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .moregamecontent-top li:nth-child(5) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/tg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .moregamecontent-top li:nth-child(6) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/jds.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .moregamecontent-top li:nth-child(7) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/pdyx.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .moregamecontent-toptwo li:nth-child(1) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/fxq.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .moregamecontent-toptwo li:nth-child(2) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/zq.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .moregamecontent-toptwo li:nth-child(3) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/elsfk.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .moregamecontent-toptwo li:nth-child(4) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/dsq.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .moregamecontent-toptwo li:nth-child(5) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/llk.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .moregamecontent-toptwo li:nth-child(6) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/ppwzq.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .moregamecontent-toptwo li:nth-child(7) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/fbdr.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .moregamecontent-toptwo li:nth-child(8) {
    background-image: url(@/assets/img/home/Home-img/moregameimg/hbq.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
</style>